<template>
  <div id="home">
    <!-- 遮罩：防止用户在动画播放期间点击屏幕 -->
    <div
      class="mask_ban_touch"
      v-if="!flag"
      style="width: 100%; height: 100%; z-index: 999; position: absolute"
    ></div>


    <!-- 中间搜索引擎部分 -->
    <div
      :style="{ background: `url(${imgUrl})` }"
      :class="[{ wrapper_blur: centerShow }, 'wrapper', 'bg-blur']"
      @wheel="handleMouseWheel" v-swipeup="showCenter">
      <div :class="['img_shadow', { img_shadow_show: imgLoded }]"></div>
      <div class="inner" style="cursor: pointer" >
        <div :class="['hello', { hello_bottom: flag }]">
          <div class="sousuo">
            <div class="search">

              <div class="search-box">
                <i id="search-icon"
                   :style="{background: 'url('+searchIcon+')'+'no-repeat center/cover' ,color: searchList[0].color}"
                   @mouseenter="onEnterTd()" @mouseleave="onLeaveTd()"
                ></i>
                <input  class="search-input" id="txt"
                        placeholder="请输入搜索关键字" type="text"
                        v-model="searchTxt" @keyup.enter="goSearch()">
                <button class="search-btn" @click="goSearch()"></button>
              </div>

              <!-- 搜索引擎 -->
              <div class="search-engine" v-if="searchChooseShow"
                   @mouseenter="onEnterTd()" @mouseleave="onLeaveTd()">
                <div class="search-engine-head">
                  <strong class="search-engine-tit">选择搜索引擎：</strong>
                </div>
                <ul class="search-engine-list">
                  <li v-for="item in searchList"
                      :key="item.name"
                      @click="chooseSearch(item.icon,item.url)">
                    <i :style="{background: 'url('+item.icon+')'+'no-repeat center/cover' ,color: item.color}"
                       ></i>
                    <span>{{item.name}}</span>
                  </li>
                </ul>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>


    <!--右上角菜单-->
    <transition name="fade">
      <div class="shadow" v-show="rightShow"></div>
    </transition>
    <transition name="slide">
      <div v-show="rightShow" class="right_wrapper" @click="hideRight">
        <div class="right_inner" @click="stopPropagation">
          <right @hide="hideRight" ref="center"></right>
        </div>
      </div>
    </transition>
    <div :class="['menu', { click: rightShow }]">
      <div class="btn" @click="handleClick">
        <span></span>
        <span></span>
        <span></span>
      </div>

    </div>


    <!-- 网站热榜部分   -->
    <transition name="fade">
      <div class="shadow" v-show="centerShow" ></div>
    </transition>
    <transition name="hotslide" >
      <div class="hot_wrapper" v-show="centerShow"  @click="hideCenter">
        <div class="hot_inner" @click="stopPropagation">
          <hotNews @hide="hideCenter" ref="center"></hotNews>
        </div>
      </div>
    </transition>

    <!--    热榜上下滑动指示器 -->
    <div
        :class="['bottom', { bottom_show: flag }]"
        style="cursor: pointer"
        @click="centerShow = !centerShow"
    >
      <div class="bottom-icon">
        <transition name="fade">
          <i v-if="!centerShow" class="mdi-chevron-up mdi"></i>
          <i v-if="centerShow" class="mdi-chevron-down mdi"></i>
        </transition>
      </div>
      <div class="bottom-info">热榜内容</div>
    </div>

    <!-- 备案号 -->
    <a
      class="record_number"
      :class="{ record_number_show: flag }"
      href="http://beian.miit.gov.cn/"
      v-if="recordNumber"
      >{{ recordNumber }}</a
    >

  </div>



</template>

<script>
function randomNum(minNum, maxNum) {
  switch (arguments.length) {
    case 1:
      return parseInt(Math.random() * minNum + 1, 10);
    case 2:
      return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
    default:
      return 0;
  }
}

import right from "./right.vue";
import hotNews from "./hotNews.vue";

export default {
  name: "home",
  data() {
    this.startTime = new Date();
    return {
      flag: false, // 动画是否播放完毕
      slogan: [],
      i: 0,
      centerShow: false, // 导航抽屉显示状态
      imgLoded: false, // 背景图片加载状态
      imgUrl: "",
      rightShow: false,

      searchChooseShow:false,
      searchList: [
        {
          name: '必应',
          color: '#0a8583',
          icon: require('./img/bing.svg'),
          url: 'https://cn.bing.com/search?q='
        },
        {
          name: '百度',
          icon: require('./img/baidu.svg'),
          color: '#3385ff',
          url: 'https://www.baidu.com/s?wd='
        },
        {
          name: 'B站',
          icon: require('./img/bilibili.svg'),
          color: '#f45a8d',
          url: 'http://search.bilibili.com/all?keyword='
        },
         {
          name: '抖音',
          icon: require('./img/book.svg'),
          color: '#03bc11',
          url: 'https://www.douyin.com/search/'
        },   {
          name: '搜狗',
          icon: require('./img/sogou.svg'),
          color: '#fe620d',
          url: 'https://www.sogou.com/web?query='
        },  {
          name: '360',
          icon: require('./img/so.svg'),
          color: '#f8b616',
          url: 'https://www.so.com/s?q='
        }
      ],
      searchIcon:'',
      searchUrl:'',
      searchTxt:'',
    };
  },
  components: {
    right,
    hotNews
  },
  computed: {
    recordNumber() {
      return this.$config.RECORD_NUMBER;
    }
  },
  methods: {
    //点击右侧菜单
    handleClick() {
      this.rightShow = !this.rightShow;
    },

    chooseSearch(icon,url){
      this.searchIcon=icon;
      this.searchUrl=url;
    },
    goSearch(){
      window.open(this.searchUrl+this.searchTxt);


    },
    //选择搜索引擎鼠标 进入的事件。
    onEnterTd() {
      this.searchChooseShow=true;
    },
    //选择搜索引擎 鼠标离开的事件。
    onLeaveTd() {
      this.searchChooseShow=false;
    },


    goToBlog() {
      window.location.href = this.$config.BLOG_URL;
    },
    _jieliu(callback, delay) {
      let currentTime = new Date();
      if (currentTime - this.startTime > delay) {
        callback();
        this.startTime = new Date();
      }
    },
    handleMouseWheel(e) {
      // if(this.rightShow){
      //   return
      // }
      if (e.deltaY < 0) {
        // 如果鼠标滚轮向上滚动
        if (!this.centerShow) {
          return
        } else {
          this.centerShow = false;
        }
      } else {
        // 如果鼠标滚轮向下滚动
        if (!this.centerShow) {
          this.centerShow = true;
        } else {
          return
        }
      }
    },
    showCenter() {
      this.centerShow = true;
    },
    hideCenter() {
      this.centerShow = false;
    },
    hideRight() {
      this.rightShow = false;
    },

    stopPropagation(e) {
      e.stopPropagation();
    }
  },
  mounted() {
    setTimeout(() => {
      this.flag = true;
    }, 1300);

    this.axios.get("/LjPage/BingImg").then( res =>{
      if(res.data.status === 200 ){
        console.log('1'+res.data.data);
        this.imgUrl=res.data.data;
        console.log('2'+this.imgUrl);
        var img = new Image();
        img.src = this.imgUrl;
        img.onload = () => {
          this.imgLoded = true;
        };
      }
    })

    this.slogan = this.$config.SLOGAN;
    this.i = randomNum(0, this.slogan.length - 1);

    this.searchIcon=this.searchList[0].icon;
    this.searchUrl=this.searchList[0].url;
  }
};
</script>

<style lang="scss" scoped>
#home {
  height: 100%;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .github {
    display: block;
    position: absolute;
    top: 10px;
    right: 10px;
    color: white;
    font-size: 2rem;
    z-index: 1;
    cursor: pointer;
  }
  .wrapper {
    background-size: cover !important;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    display: flex;
    border-radius: 100%;
    animation: logoEnter 1.2s;
    animation-fill-mode: forwards;
    transition: all 0.8s;
    .inner {
      position: relative;
      .R_logo {
        height: 7rem;
        position: absolute;
        transform: translate(-50%, -50%);
        transition: all 1s;
        top: 0;
      }
      .R_logo_top {
        top: -3.2rem;
      }
      .hello {
        color: #ffffff;
        width: 40rem;
        //text-align: center;
        position: absolute;
        transform: translate(-50%, -300%);
        font-size: 1.5rem;
        opacity: 0;
        top: 0px;
        transition: all 1s;
      }
      .hello_bottom {
        opacity: 1;
        //top: 3.5rem;
        .hello_bottom_text {
          font-size: 1rem;
          margin-top: 0.5rem;
          padding-top: 0.5rem;
          border-top: 1px solid #fff;
        }
      }
    }
  }
  .img_shadow {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #fda085;
    overflow: hidden;
    transition: all 0.5s;
  }
  .img_shadow_show {
    background-color: rgba(0, 0, 0, 0.3);
  }

  .sousuo {
    padding: 15px;
    position: relative;
  }


  .search {
    position: relative;
    width: 100%;
    margin: 0 auto;
  }

  .search-box {
    transition: 0.2s all linear;
    height: 60px;
    overflow: hidden;
    display: -webkit-flex;

    display: flex;
    flex-wrap: wrap;
    border: 1px solid #c2c4ca;
    box-shadow: 0 2px 3px #0000000f;
    border-radius: 24px;
    background-color: #fff
  }

  #search-icon {
    display: block;
    position: absolute;

    left: 5px;
    top: 5px;
    width: 50px;
    height: 50px;
    overflow: hidden;
    border-radius: 25px;
    text-align: center;
    line-height: 41px;
    font-size: 30px;

    cursor: pointer
  }

  .search-input {
    box-sizing: border-box;
    font-family: 'Noto-Sans-SC-Bold-2', PingFangSC-Light, Microsoft YaHei UI, Microsoft YaHei, helvetica, sans-serif;
    flex: 1;
    //height: 50px;
    font-size: 1.125rem;
    color: #0b0a0a;
    border: none;
    outline: none;

    padding-left: 60px;
    padding-right: 45px;
  }

  input::-webkit-input-placeholder {
    font-size: 14px;
    font-family: 'Noto-Sans-SC-Bold-2', PingFangSC-Light, Microsoft YaHei UI, Microsoft YaHei, helvetica, sans-serif;
    letter-spacing: 1px;
    color: #ccc;
  }

  .search-btn {
    left: 5px;
    top: 5px;
    width: 50px;
    height: 50px;
    background: url(./img/go.svg) center center / 2em no-repeat;
    border-radius: 25px;
    border: none;
    color: #64B5F6;
    font-weight: bold;
    outline: none;
    cursor: pointer;
  }

  .search-btn:hover {
    background-color: #f5f5f5;
  }

  .search-hot-text {
    position: absolute;
    z-index: 100;
    width: 100%;
    margin: 5px auto;
    border-top: none;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0px 4px 10px 0px #cccccc95;
  }

  .search-hot-text ul {
    margin: 0;
    padding: 0;
  }

  .search-hot-text ul li {
    border-top: 1px solid #f2f2f2;
    line-height: 32px;
    font-size: 14px;
    padding: 0px 18px;
    color: #777;
    cursor: pointer;
    list-style: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .search-hot-text ul li.current {
    background: #f1f1f1;
    color: #2196f3;
    border-radius: 8px;
  }

  .search-hot-text ul li:hover {
    background: #f1f1f1;
    color: #2196f3;
    cursor: pointer;
    border-radius: 8px;
  }

  #search-clear {
    position: absolute;
    right: 60px;
    top: 50%;
    float: left;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    margin-top: -10px;
    color: #a9b1c7;
    cursor: pointer;
  }

  #search-clear:hover {
    font-weight: bold;
    color: #5c5e63;
  }

  .search-engine {
    position: absolute;
    top: 65px;
    left: 0;
    width: 100%;
    background: #FFF;
    padding: 15px 0 0 15px;
    border-radius: 5px;
    box-shadow: 0px 5px 20px 0px #d8d7d7;
    transition: all 0.3s;
    z-index: 999
  }

  .search-engine-head {
    overflow: hidden;
    margin-bottom: 10px;
    padding-right: 15px;
  }

  .search-engine-tit {
    float: left;
    margin: 0;
    font-size: 14px;
    color: #999;
  }

  .search-engine-tool {
    float: right;
    font-size: 14px;
    color: #999;
  }

  .search-engine-tool>span {
    display: inline-block;
    width: 30px;
    height: 10px;
    font-size: 18px;
    line-height: 10px;
    cursor: pointer
  }

  .search-engine-tool>span.icon-kaiguanguan-kai {
    color: #0e932e;
  }

  .search-engine ul {
    padding: 0;
  }

  .search-engine ul::before {
    content: '';
    width: 0px;
    height: 0px;
    position: absolute;
    top: -15px;
    border-top: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #fff;
    border-left: 8px solid transparent;
  }

  .search-engine-list::after {
    content: '';
    width: 70px;
    height: 18px;
    position: absolute;
    top: -17px;
    left: 1px;
  }

  .search-engine-list li {
    float: left;
    width: 30%;
    line-height: 25px;
    font-size: 14px;
    padding: 5px 0;
    margin: 0 10px 10px 0;
    background: #f9f9f9;
    color: #999;
    cursor: pointer;
    list-style: none;
  }

  .search-engine-list li i {
    display: inline-block;
    width: 25px;
    height: 25px;
    float: left;
    font-size: 20px;
    line-height: 25px;
    margin: 5px;
  }

  .search-engine-list li span {
    float: left;
    margin: 5px;
  }

  .wrapper_blur {
    filter: blur(1px);
  }
  .menu {

    .btn {
      box-sizing: border-box;
      position: fixed;
      z-index: 999;
      right: 55px;
      top: 40px;
      padding-top: 12px;
      width: 40px;
      height: 40px;
      cursor: pointer;
      border-radius: 50%;
      background-color: transparent;
      transition: background-color 0.3s;
      &:hover {
        background-color: #6bc30d;
      }
      span {
        position: relative;
        top: 0;
        display: block;
        width: 26px;
        height: 2px;
        margin: 0 auto 5px;
        background-color: #fff;
        transition: all 0.32s;
        transform: rotate(0deg);
      }
    }
    .cover {
      opacity: 0;
      z-index: 8;
      //position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      transition: opacity 1.5s;

      &::before {
        position: absolute;
        right: 100%;
        top: 0;
        content: "";
        width: 4999px;
        height: 100%;
        background-color: #e9ecef;
        //transform: skew(-12deg);
        transition: left 0.3s;
      }
      .point {
        position: absolute;
        overflow:auto;
        right: 0;
        top: 200px;
        width: 30%;
        z-index: 101;
        font-size: 20px;
        box-sizing: border-box;
        margin-bottom: 20px;
        background-color: rgba(255, 255, 255, 0.8);
        padding: 15px 20px 20px;
        border-radius: 15px;

        a {
          position: relative;
          display: block;
          text-align: right;
          color: #686967;
          line-height: 46px;
          padding: 10px 30px;
          margin-right: 20px;
          font-size: 20px;
          text-decoration: none;
          -webkit-transition: color 0.6s linear;
          transition: color 0.6s linear;
          &::before {
            position: absolute;
            top: 50%;
            left: 0;
            width: 0;
            opacity: 0;
            height: 1px;
            background-color: #6bc30d;
            content: "";
            transition: all 0.3s;
          }
          &:hover {
            color: #6bc30d;
          }
        }
      }

      .gg {
        overflow:auto;
        .after {
          content: '';
          width: 70px;
          height: 18px;
          position: absolute;
          top: -17px;
          left: 1px;
        }
      }
      .gg li {
        float: left;
        width: 30%;
        line-height: 25px;
        font-size: 14px;
        padding: 5px 0;
        margin: 0 10px 10px 0;
        border-radius: 5px;
        &:hover {
          background-color: #E2E5E5FF;
          transition: background-color 0.2s;
        }
        color: #4b4949;
        cursor: pointer;
        list-style: none;
      }
      .gg li i {
        display: inline-block;
        width: 25px;
        height: 25px;
        float: left;
        font-size: 20px;
        line-height: 25px;
        margin: 5px;
      }
      .gg li span {
        float: left;
        margin: 5px;
      }
      .cover-logo {
        font-size: 50px;
        position: absolute;
        right: 0;
        bottom: 0;
        z-index: 101;
        padding: 10px 50px;
        font-family: FZJianQRTJW;
        color: #686967;
        cursor: pointer;
      }
    }
    &.click {
      .btn {
        background-color: rgba(0, 0, 0, 0.1);
        span:nth-child(1) {
          top: 8px;
          transform: rotate(45deg);
        }
        span:nth-child(2) {
          top: 1px;
          transform: rotate(-45deg);
        }
        span:nth-child(3) {
          display: none;
        }
      }
      .cover {
        opacity: 1;
        z-index: 10;
        &::before {
          left: 65%;
        }
      }
    }
  }
  .bottom {
    font-size: 2rem;
    position: absolute;
    color: #fff;
    bottom: 0%;
    opacity: 0;
    transition: all 1s;
    text-align: center;
    .bottom-info {
      font-size: 1rem;
      margin-top: 5px;
      animation: float 4s infinite ease-in-out;
    }
  }
  .bottom_show {
    bottom: 50px;
    opacity: 1;
  }
  .shadow {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
  }
  .right_wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    .right_inner {
      width: 30%;
      position: absolute;
      overflow: hidden;
      border-radius: 0.5rem;
      //left: 0;
      right: 0;
      margin: 0 auto;
      bottom: 5%;
      height: 80%;
    }
  }
  .hot_wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    //z-index: 2;
    .hot_inner {
      width: 70%;
      position: absolute;
      overflow: auto;
      border-radius: 0.5rem;
      left: 0;
      right: 0;
      margin: 0 auto;
      bottom: 5%;
      height: 60%;
    }
  }


  .record_number {
    width: 100%;
    text-align: center;
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    line-height: 30px;
    background: rgba(0, 0, 0, 0.4);
    position: fixed;
    bottom: 0;
    transform: translateY(30px);
    transition: transform ease 1s;
  }
  .record_number_show {
    transform: translateY(0px);
  }
}

@media screen and (max-width: 900px) {
  #home {
    .center_wrapper {
      .center_inner {
        width: 100%;
        bottom: 0px;
        padding: 10px;
        box-sizing: border-box;
      }
    }
  }
}
@media screen and (max-width: 900px) {
  #home {
    .hot_wrapper {
      .hot_inner {
        width: 100%;
        bottom: 0px;
        padding: 10px;
        box-sizing: border-box;
      }
    }
  }
}
.slide-enter-active,
.slide-leave-active {
  transition: all 0.3s ease;
}

.slide-enter,
.slide-leave-to {
  transform: translateX(100%);
}

.hotslide-enter-active,
.hotslide-leave-active {
  transition: all 0.3s ease;
}

.hotslide-enter,
.hotslide-leave-to {
  transform: translateY(100%);
}


.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s ease;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

@keyframes logoEnter {
  0% {
    opacity: 0;
    width: 0rem;
    height: 0rem;
  }
  20% {
    opacity: 1;
    width: 15rem;
    height: 15rem;
  }
  80% {
    transform: rotate(360deg);
    width: 15rem;
    height: 15rem;
  }
  100% {
    transform: rotate(360deg);
    width: 100%;
    height: 100%;
    border-radius: 0;
  }
}

@keyframes float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}
</style>
